<template>
  <div class="school-announcement">
    <div class="comp-header">
      <h3>学校公告</h3>
    </div>
    <div class="anno-list">
      <div class="anno-item" v-for="(announcement, index) in announcements" :key="index">
        <div style="display: flex;">
          <img src="@/assets/workbench/u630.png" alt="学校公告" class="anno-img">
          <div class="anno-title">
            {{ announcement.noticeTitle }}
          </div>
        </div>
        <div class="anno-meta">
          <span class="anno-date">{{ announcement.createTime }}</span>
          <span class="anno-dept" @click="goToNotice(announcement)">详情</span>
        </div>
      </div>
    </div>
    <el-dialog
      title="通知公告"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose"
      class="dialog-notice">
      <div class="dialog-content">
        <h2 class="dialog-title">{{ notice.noticeTitle }}</h2>
        <div class="dialog-meta">
          <div class="meta-item">
            <div class="item-label">公告内容：</div>
            <div class="item-value">{{ notice.noticeContent }}</div>
          </div>
          <div class="meta-item">
            <div class="item-label">发布人：</div>
            <div class="item-value">{{ notice.createBy }}</div>
          </div>
          <div class="meta-item">
            <div class="item-label">发布时间：</div>
            <div class="item-value">{{ notice.createTime }}</div>
          </div>
          <div class="meta-item">
            <div class="item-label">附件：</div>
            <div class="item-value">
              <FileUpload v-model="notice.attachmentUrl" :disabled="true" :fileInfo="notice.fileInfo"/>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { listNotice } from "@/api/system/notice";
import FileUpload from "@/components/FileUpload";
export default {
  components: { FileUpload },
  data() {
    return {
      dialogVisible: false,
      notice: {},
      announcements: [],
      fileInfo:{}
    }
  },
  created() {
    this.getNotice()
  },
  methods: {
    getNotice() {
      listNotice().then(res => {
        this.announcements = res.rows
      })
    },
    goToNotice(item) {
      this.notice = item;
      this.dialogVisible = true;
    },
    handleClose(done) {
      this.dialogVisible = false;
    }
  }
}
</script>

<style scoped>
/* 头部样式 */
.comp-header {
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
}

.comp-header h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

/* 公告列表样式 */
.anno-list {
  overflow-y: auto;
}

.anno-item {
  height: 40px;
  padding: 6px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}

.anno-title {
  color: #333;
  cursor: pointer;
  transition: color 0.2s;
  font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
  font-weight: 400;
}

.anno-title:hover {
  color: #1890ff;
}

.anno-meta {
  display: flex;
  width: 25%;
  color: #666;
  justify-content: space-between;
}

.anno-date {
  margin-right: 10px;
}

.anno-img {
  width: 18px;
  height: 18px;
  margin-right: 10px;
}

.anno-dept {
  color: #3371FF;
}

/* 弹窗样式 */
.dialog-notice {
  /* 弹窗容器样式 */
}

.dialog-content {
  padding: 10px 0;
  line-height: 1.6;
}

.dialog-title {
  font-size: 18px;
  color: #333;
  margin: 0 0 16px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
  text-align: center
}

.dialog-meta {
  gap: 20px;
  color: #666;
  font-size: 14px;
  margin-bottom: 16px;
  padding: 8px 65px;
}

.meta-item {
  display: flex;
  padding: 10px 0;
}

.item-label{
  width: 80px;
  text-align: right;
}
.item-value{
  width: 400px;
  margin-left: 20px;
}
</style>